<template>
  <div
    ref="contanerRef"
    class="text-sm dark:bg-black p-1.5 flex flex-col gap-1.5 border-b dark:border-[#000] dark:text-[#fff]"
    @click="handleGoExamDetail"
  >
    <div class="flex justify-between">
      <div class="text-base font-bold text-[#065d1d]">{{ exam.name }}</div>
      <div class="flex gap-1 font-bold">
        <span class="text-[#4b84ec]">{{ exam.sex }}</span>
        <span>{{ exam.age }}</span>
        <span>{{ exam.machineType }}</span>
      </div>
      <div class="text-sm flex gap-1 text-zinc-100">
        <span
          class="p-[4px] bg-[#009f94]"
          @click.stop="handleViewImage('DICOM')"
          >影像</span
        >
        <span
          class="p-[4px] bg-[#005f28]"
          @click.stop="handleViewImage('report')"
          >报告</span
        >
      </div>
    </div>
    <div>
      <span>检查描述：{{ exam.machineType || '无' }}</span>
    </div>
    <div class="flex justify-between">
      <div>门诊号：{{ exam.outPatientNo || '无' }}</div>
      <div>住院号：{{ exam.inPatientNo || '无' }}</div>
      <div>床号：{{ exam.sickBedNo || '无' }}</div>
    </div>
    <div class="flex justify-between">
      <div>送检科室：{{ exam.fromDeptName || '无' }}</div>
      <div class="text-zinc-400">{{ exam.reportDate }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Exam } from '../../service/index'
import { ref } from 'vue'

const props = defineProps<{
  exam: Exam
}>()

const emits = defineEmits(['dicom', 'report', 'examDetail'])
const contanerRef = ref<HTMLElement | null>(null)

/**
 * 跳转处理，记录图片
 */
const imgContainerCenter = () => {
  const container: any = contanerRef.value?.getBoundingClientRect()
  return {
    translateX: parseInt(container?.x + container?.width / 2),
    translateY: parseInt(container?.y + container?.height / 2)
  }
}

const handleGoExamDetail = () => {
  emits('examDetail', { exam: props.exam, localtion: imgContainerCenter() })
}

const handleViewImage = (type: 'DICOM' | 'report') => {
  if (type === 'DICOM') {
    emits('dicom', {
      id: props.exam.id,
      moduleName: props.exam.moduleName
    })
  } else {
    emits('report')
  }
}
</script>

<style scoped></style>
